<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<text style="font-size: .9em;" slot="content">2109年秋季学期八年级期末考试各班质量跟</text>
		</cu-custom>
		<tui-tabs :is-fixed="true" class="tui-tabs" :tabs="tabs2" :currentTab="0" selectedColor="#EB0909" sliderBgColor="#EB0909" @change="change">
			<template #filter="{row,index}">
				<text style="color: #000000;" @click="rightDrawer = true">筛选</text>
				<tui-icon name="screen" :size="16" :color="'#EB0909'" @click="rightDrawer = true"></tui-icon>
			</template>
		</tui-tabs>
		<view style="height: 40px;"></view>
		<template>
			<view style="margin-top: -1px; display: flex;padding: 0 40rpx;position: fixed;z-index: 99;background-color: #fff;">
				<tui-tag size="10px" margin="12px 12px 12px 0" plain shape="circle" @click="show">任课老师：马化腾</tui-tag>
				<tui-tag size="10px" margin="12px 12px 12px 0" plain shape="circle" @click="show">等分老师：马玉</tui-tag>
			</view>
			<view style="height: 40px;"></view>
		</template>
		<tui-list-cell :lineLeft="false" @click="detail" v-for="i in 20">
			<view class="tui-item-box">
				<view class="tui-msg-box">
					<image src="https://weiliicimg9.pstatp.com/weili/l/989783854900052208.webp" class="tui-msg-pic" mode="scaleToFill"></image>
					<view class="tui-msg-item">
						<view class="tui-msg-name">呼噜猪</view>
						<view class="tui-msg-content">学号：213123123213131</view>
					</view>
				</view>
				<view class="tui-msg-right">
					<view class="tui-msg-time">123分</view>
					<text class="grade a">A</text>
				</view>
			</view>
		</tui-list-cell>
		<!--右抽屉-->
		<tui-drawer :mask-z-index="998" :z-index="999" mode="right" :visible="rightDrawer" @close="rightDrawer=false">
			<uni-list style="width: 60vmin;">
				<picker :value="locationIndex" @change="bindPickerChange" :range="locationArray">
					<uni-list-item title="学期:" :rightText="locationArray[locationIndex]"></uni-list-item>
				</picker>
				<picker :value="locationIndex" @change="bindPickerChange" :range="locationArray">
					<uni-list-item title="考试:" :rightText="locationArray[locationIndex]"></uni-list-item>
				</picker>
				<picker :value="locationIndex" @change="bindPickerChange" :range="locationArray">
					<uni-list-item title="班级:" :rightText="locationArray[locationIndex]"></uni-list-item>
				</picker>
				<picker :value="locationIndex" @change="bindPickerChange" :range="locationArray">
					<uni-list-item title="科目" :rightText="locationArray[locationIndex]"></uni-list-item>
				</picker>
			</uni-list>
		</tui-drawer>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rightDrawer: false,
				locationArray: ["1", 2, 3, 4],
				tabs2: [{
					name: "按学号"
				}, {
					name: "按姓名"
				}, {
					name: "按成绩"
				}, {
					disabled: true,
					slot: "filter"
				}]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.tui-list-cell {}

	.tui-item-box {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.tui-msg-box {
		display: flex;
		align-items: center;
	}

	.tui-msg-pic {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: block;
		margin-right: 24rpx;
		flex-shrink: 0;
	}

	.tui-msg-item {
		max-width: 500rpx;
		min-height: 80rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.tui-msg-name {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 34rpx;
		line-height: 1;
		color: #262b3a;
	}

	.tui-msg-content {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 26rpx;
		line-height: 1;
		color: #9397a4;
	}

	.tui-msg-right {
		max-width: 120rpx;
		height: 88rpx;
		margin-left: auto;
		text-align: right;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.tui-msg-time {
		width: 100%;
		font-size: 34rpx;
		line-height: 34rpx;
		color: #ff0000;
	}

	.grade {
		font-size: 34rpx;
		width: 1.6em;
		height: 1.6em;
		line-height: 1.6em;
		vertical-align: middle;
		text-align: center;
		background-color: #555555;
		color: #fff;
		border-radius: 50%;
		margin-top: .2em;

		&.a {
			background-color: orange;
		}

		&.b {
			background-color: purple;
		}

		&.c {
			background-color: blue;
		}
	}
</style>
